import React, { useEffect } from 'react';
import { generate as generateId } from 'shortid';
import Watermark from '@joy/watermarkjs';

const WatermarkBox = props => {
  const { children, setting } = props;

  const boxId = generateId(32);
  useEffect(() => {
    const watemark = new Watermark({ ...setting, watermark_parent_node: boxId });
    return () => {
      watemark.destroy();
    };
  });

  return <div id={boxId}>{children}</div>;
};

export default WatermarkBox;
